<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff" title="我的作业">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="my-work-warp">
            <cube-scroll>
                <fillet-card class="work-card">
                    <div class="work-box" slot="content">
                        <div class="current-work">
                            <div class="title">待完成科目</div>
                            <div class="item"></div>
                            <div class="no-current-work" v-if="unFinishedList.length<=0">暂无待完成科目！</div>
                        </div>
                        <div class="history-work">
                            <div class="title">作业回顾</div>
                            <div class=""></div>
                        </div>
                    </div>
                </fillet-card>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import NavBar from "@/components/aui/NavBar.vue";
    import FilletCard from "@/components/aui/FilletCard.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, FilletCard
        }
    })
    export default class MyWork extends Scene {

        private unFinishedList: any[] = [];
        private finishedList: any[] = [];

        @State("UserStore")
        public user!: InterfaceUser;

        private mounted(): void {

            this.getMyWorkData();
        }

        private async getMyWorkData(): Promise<any> {
            const unFinishedListRes = await Http.get(this.api.getHomeWorkOverView, CommonUnit.argumentWithUser(this.user));
            if (unFinishedListRes.Success) {
                const finishedListRes = await Http.get(this.api.getHomeWorkHistoryOverView, CommonUnit.argumentWithUser(this.user));
                this.unFinishedList = unFinishedListRes.Data || [];
                this.finishedList = finishedListRes.Data || [];
            } else {
                (<any> this).$createToast({
                    mask: true,
                    type: "warn",
                    time: 1500,
                    txt: unFinishedListRes.Message,
                    onTimeout: () => {
                        if (!CommonUnit.responseLoginVerification(unFinishedListRes)) {
                            this.navigateLoginPage();
                        }
                    }
                }).show();
            }

        }

        private back(): void {
            this.navigateBack();
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;
        height 100vh;

    .my-work-warp
        height 100vh;
        padding calc(44px + env(safe-area-inset-top)) 0 0 0;
        position relative;

        .work-card
            margin 10px 12px 0;

            .work-box
                padding 18px;

                .current-work
                    border-bottom 1px solid #c8c7cc;
                    padding 0 0 5px 0;

                    .title
                        padding 11px 8px;
                        margin 0 0 7px 0;
                        color $theme-common-color;

                    .item, .no-current-work
                        line-height 22px;
                        padding 0 10px 0 20px;

                    .no-current-work
                        color #333;

                .history-work
                    .title
                        padding 10px 0 0 10px;
                        font-size 14px;


</style>
